# Alert

## Installation

`npm i @snack-uikit/alert`

[Changelog](./CHANGELOG.md)

## Example

```tsx
import { Alert, AlertTop } from '@snack-uikit/alert';
import { InfoFilledSVG } from '@snack-uikit/icons';

// Alert component displays a notification with an optional icon, title, description, and link.
// It can be used to provide information, warnings, errors, or success messages.

<Alert
  appearance='neutral'
  link={{
    text: 'Link text',
    href: 'https://cloud.ru/',
  }}
  title='Title'
  description='Title description'
  onClose={() => console.log('alert')}
/>;

// AlertTop component is similar to Alert but is positioned at the top of the screen.
// It can have an additional button with customizable text, icon, and click handler.

<AlertTop
  appearance='neutral'
  link={{
    text: 'Link text',
    href: 'https://cloud.ru/',
  }}
  closeable
  title='Title'
  description='Title description'
  action={{
    text: 'Button Text',
    icon: <PlaceholderSVG />,
    onClick: () => {},
  }}
  onClose={() => console.log('alert top')}
/>;
```

[//]: DOCUMENTATION_SECTION_START
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
## Alert
Компонент для отображения уведомления.
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| description* | `ReactNode` | - | Описание |
| icon | `boolean` | true | Отображать иконку |
| title | `string` | - | Заголовок |
| truncate | `{ title?: number; }` | '{ <br>title: 1 }' | Максимальное кол-во строк <br> - `title` - в заголовке |
| link | `Pick<LinkProps, "text" \| "target" \| "onClick" \| "href" \| "appearance" \| "external">` | - | Cсылка |
| onClose | `() => void` | - | Колбек закрытия |
| appearance | enum Appearance: `"neutral"`, `"primary"`, `"error"`, `"warning"`, `"success"` | neutral | Внешний вид |
| className | `string` | - | CSS-класс |
| actions | `{ primary: Omit<AlertButtonProps, "appearance">; secondary?: Omit<AlertButtonProps, "appearance">; }` | - | Кнопки в футере алерта |
## AlertTop
Компонент для отображения уведомления вверху экрана.
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| description* | `ReactNode` | - | Описание |
| icon | `boolean` | true | Отображать иконку |
| title | `string` | - | Заголовок |
| truncate | `{ title?: number; }` | '{ <br>title: 1 }' | Максимальное кол-во строк <br> - `title` - в заголовке |
| link | `Pick<LinkProps, "text" \| "target" \| "onClick" \| "href" \| "appearance" \| "external">` | - | Cсылка |
| action | `AlertButtonProps` | - | Кнопка дополнительного действия |
| onClose | `() => void` | - | Колбек закрытия |
| appearance | enum Appearance: `"neutral"`, `"primary"`, `"error"`, `"warning"`, `"success"` | neutral | Внешний вид |
| className | `string` | - | CSS-класс |


[//]: DOCUMENTATION_SECTION_END
